<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>cloudfeeling</title>
    <meta name="keywords" content="cloudfeeling">
    <meta name="description" content="cloudfeeling">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    
    <style>
		#loader {
			transition: all .3s ease-in-out;
			opacity: 1;
			visibility: visible;
			position: fixed;
			height: 100vh;
			width: 100%;
			background: #fff;
			z-index: 90000
		}
		
		#loader.fadeOut {
			opacity: 0;
			visibility: hidden
		}
		
		.spinner {
			width: 40px;
			height: 40px;
			position: absolute;
			top: calc(50% - 20px);
			left: calc(50% - 20px);
			background-color: #333;
			border-radius: 100%;
			-webkit-animation: sk-scaleout 1s infinite ease-in-out;
			animation: sk-scaleout 1s infinite ease-in-out
		}
		
		@-webkit-keyframes sk-scaleout {
			0% {
				-webkit-transform: scale(0)
			}
			100% {
				-webkit-transform: scale(1);
				opacity: 0
			}
		}
		
		@keyframes sk-scaleout {
			0% {
				-webkit-transform: scale(0);
				transform: scale(0)
			}
			100% {
				-webkit-transform: scale(1);
				transform: scale(1);
				opacity: 0
			}
		}
	</style>
    
    <link href="/user/plug-in/layuiv2.3.0/css/layui.css" rel="stylesheet">
    
    <link href="/user/default/default.css" rel="stylesheet">
    
	<script src="/user/plug-in/jquery/jquery.min.js"></script>
	
	<script src="/user/plug-in/jquery-cookie/jquery-cookie.js"></script>
	
	<script th:inline="javascript"> var ctx = [[@{/}]] ; </script>
</head>

<body class="app">
     <div id="loader" >
			<div class="spinner"></div>
		</div>
		<script>
			window.addEventListener('load', () => {
				const loader = document.getElementById('loader');
				setTimeout(() => {
					loader.classList.add('fadeOut');
				}, 300);
			});
		</script>
		<div >
			<div class="sidebar">
				<div class="sidebar-inner">
					<div class="sidebar-logo">
						<div class="peers ai-c fxw-nw">
							<div class="peer peer-greed">
								<a class="sidebar-link td-n" href="/user/index">
									<div class="peers ai-c fxw-nw">
										<div class="peer">
											<div class="logo"><img style="width: 70px;height: 65px" src="assets/static/images/logo.png" alt=""></div>
										</div>
										<div class="peer peer-greed">
											<h5 class="lh-1 mB-0 logo-text">Adminator</h5></div>
									</div>
								</a>
							</div>
							<div class="peer">
								<div class="mobile-toggle sidebar-toggle">
									<a href="" class="td-n"><i class="ti-arrow-circle-left"></i></a>
								</div>
							</div>
						</div>
					</div>
					<ul class="sidebar-menu scrollable pos-r">
						<li class="nav-item mT-30 active">
							<a class="sidebar-link" href="/user/list"><span class="icon-holder"><i class="c-blue-500 ti-home"></i> </span><span class="title">用户管理</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/user/depart"><span class="icon-holder"><i class="c-blue-500 ti-home"></i> </span><span class="title">部门组织管理</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/user/menu"><span class="icon-holder"><i class="c-blue-500 ti-home"></i> </span><span class="title">系统菜单管理</span></a>
						</li>
						<li class="nav-item active">
							<a class="sidebar-link" href="/user/main"><span class="icon-holder"><i class="c-blue-500 ti-home"></i> </span><span class="title">Mian</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/ui/calendar"><span class="icon-holder"><i class="c-brown-500 ti-email"></i> </span><span class="title">Calendar</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/ui/charts"><span class="icon-holder"><i class="c-blue-500 ti-share"></i> </span><span class="title">Charts</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/ui/datatable"><span class="icon-holder"><i class="c-deep-orange-500 ti-calendar"></i> </span><span class="title">Datatable</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/ui/errorpage"><span class="icon-holder"><i class="c-deep-purple-500 ti-comment-alt"></i> </span><span class="title">404</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/ui/forms"><span class="icon-holder"><i class="c-indigo-500 ti-bar-chart"></i> </span><span class="title">Forms</span></a>
						</li>
						<li class="nav-item">
							<a class="sidebar-link" href="/ui/table"><span class="icon-holder"><i class="c-light-blue-500 ti-pencil"></i> </span><span class="title">Table</span></a>
						</li>						
						<li class="nav-item dropdown">
							<a class="sidebar-link" href="/ui/ui"><span class="icon-holder"><i class="c-pink-500 ti-palette"></i> </span><span class="title">UI</span></a>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle" href="javascript:void(0);"><span class="icon-holder"><i class="c-orange-500 ti-layout-list-thumb"></i> </span><span class="title">Tables</span> <span class="arrow"><i class="ti-angle-right"></i></span></a>
							<ul class="dropdown-menu">
								<li>
									<a class="sidebar-link" href="">Basic Table</a>
								</li>
								<li>
									<a class="sidebar-link" href="">Data Table</a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle" href="javascript:void(0);"><span class="icon-holder"><i class="c-teal-500 ti-view-list-alt"></i> </span><span class="title">Multiple Levels</span> <span class="arrow"><i class="ti-angle-right"></i></span></a>
							<ul class="dropdown-menu">
								<li class="nav-item dropdown">
									<a href="javascript:void(0);"><span>Menu Item</span></a>
								</li>
								<li class="nav-item dropdown">
									<a href="javascript:void(0);"><span>Menu Item</span> <span class="arrow"><i class="ti-angle-right"></i></span></a>
									<ul class="dropdown-menu">
										<li>
											<a class="sidebar-link" href="">Menu Item</a>
										</li>
										<li>
											<a class="sidebar-link" href="">Menu Item</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<div class="page-container">
				<div class="header navbar">
					<div class="header-container">
						<ul class="nav-left">
							<li>
								<a id="sidebar-toggle" class="sidebar-toggle" href="javascript:void(0);"><i class="ti-menu"></i></a>
							</li>
							<li class="search-box">
								<a class="search-toggle no-pdd-right" href="javascript:void(0);"><i class="search-icon ti-search pdd-right-10"></i> <i class="search-icon-close ti-close pdd-right-10"></i></a>
							</li>
							<li class="search-input"><input class="form-control" type="text" placeholder="Search..."></li>
						</ul>
						<ul class="nav-right">
							<li class="notifications dropdown"><span class="counter bgc-red">3</span>
								<a href="" class="dropdown-toggle no-after" data-toggle="dropdown"><i class="ti-bell"></i></a>
								<ul class="dropdown-menu">
									<li class="pX-20 pY-15 bdB"><i class="ti-bell pR-10"></i> <span class="fsz-sm fw-600 c-grey-900">Notifications</span></li>
									<li>
										<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
											<li>
												<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
													<div class="peer mR-15"><img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""></div>
													<div class="peer peer-greed"><span><span class="fw-500">John Doe</span> <span class="c-grey-600">liked your <span class="text-dark">post</span></span>
														</span>
														<p class="m-0"><small class="fsz-xs">5 mins ago</small></p>
													</div>
												</a>
											</li>
											<li>
												<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
													<div class="peer mR-15"><img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""></div>
													<div class="peer peer-greed"><span><span class="fw-500">Moo Doe</span> <span class="c-grey-600">liked your <span class="text-dark">cover image</span></span>
														</span>
														<p class="m-0"><small class="fsz-xs">7 mins ago</small></p>
													</div>
												</a>
											</li>
											<li>
												<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
													<div class="peer mR-15"><img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""></div>
													<div class="peer peer-greed"><span><span class="fw-500">Lee Doe</span> <span class="c-grey-600">commented on your <span class="text-dark">video</span></span>
														</span>
														<p class="m-0"><small class="fsz-xs">10 mins ago</small></p>
													</div>
												</a>
											</li>
										</ul>
									</li>
									<li class="pX-20 pY-15 ta-c bdT"><span><a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a></span></li>
								</ul>
							</li>
							<li class="notifications dropdown"><span class="counter bgc-blue">3</span>
								<a href="" class="dropdown-toggle no-after" data-toggle="dropdown"><i class="ti-email"></i></a>
								<ul class="dropdown-menu">
									<li class="pX-20 pY-15 bdB"><i class="ti-email pR-10"></i> <span class="fsz-sm fw-600 c-grey-900">Emails</span></li>
									<li>
										<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
											<li>
												<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
													<div class="peer mR-15"><img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""></div>
													<div class="peer peer-greed">
														<div>
															<div class="peers jc-sb fxw-nw mB-5">
																<div class="peer">
																	<p class="fw-500 mB-0">John Doe</p>
																</div>
																<div class="peer"><small class="fsz-xs">5 mins ago</small></div>
															</div><span class="c-grey-600 fsz-sm">Want to create your own customized data generator for your app...</span></div>
													</div>
												</a>
											</li>
											<li>
												<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
													<div class="peer mR-15"><img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""></div>
													<div class="peer peer-greed">
														<div>
															<div class="peers jc-sb fxw-nw mB-5">
																<div class="peer">
																	<p class="fw-500 mB-0">Moo Doe</p>
																</div>
																<div class="peer"><small class="fsz-xs">15 mins ago</small></div>
															</div><span class="c-grey-600 fsz-sm">Want to create your own customized data generator for your app...</span></div>
													</div>
												</a>
											</li>
											<li>
												<a href="" class="peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100">
													<div class="peer mR-15"><img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt=""></div>
													<div class="peer peer-greed">
														<div>
															<div class="peers jc-sb fxw-nw mB-5">
																<div class="peer">
																	<p class="fw-500 mB-0">Lee Doe</p>
																</div>
																<div class="peer"><small class="fsz-xs">25 mins ago</small></div>
															</div><span class="c-grey-600 fsz-sm">Want to create your own customized data generator for your app...</span></div>
													</div>
												</a>
											</li>
										</ul>
									</li>
									<li class="pX-20 pY-15 ta-c bdT"><span><a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a></span></li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
									<div class="peer mR-10"><img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/10.jpg" alt=""></div>
									<div class="peer"><span class="fsz-sm c-grey-900">John Doe</span></div>
								</a>
								<ul class="dropdown-menu fsz-sm">
									<li>
										<a href="#" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"><i class="ti-settings mR-10"></i> <span>Setting</span></a>
									</li>
									<li>
										<a id="profile" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"><i class="ti-user mR-10"></i> <span>Profile</span></a>
									</li>
									<li>
										<a href="email.html" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"><i class="ti-email mR-10"></i> <span>Messages</span></a>
									</li>
									<li role="separator" class="divider"></li>
									<li>
										<a id="logout" class="d-b td-n pY-5 bgcH-grey-100 c-grey-700"><i class="ti-power-off mR-10"></i> <span>Logout</span></a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
					<div class="content-tabs"><button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i></button>
						<nav class="page-tabs J_menuTabs">
							<div class="page-tabs-content">
								<a href="javascript:;" class="active J_menuTab" data-id="index.html">首页</a>
							</div>
						</nav><button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i></button>
						<div class="btn-group roll-nav roll-right"><button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span></button>
							<ul role="menu" class="dropdown-menu dropdown-menu-right">
								<li class="J_tabShowActive">
									<a>定位当前选项卡</a>
								</li>
								<li class="divider"></li>
								<li class="J_tabCloseAll">
									<a>关闭全部选项卡</a>
								</li>
								<li class="J_tabCloseOther">
									<a>关闭其他选项卡</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="tabmain-content">
					<div id="tabmainContent">
						<div class="J_mainContent" id="content-main"><iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="/ui/index" data-id="index.html" frameborder="0"></iframe></div>
					</div>
				</div>
				<footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600"><span>Copyright © 2017 Designed by <a href="https://www.feeljblog.com/" target="_blank" title="Colorlib">Colorlib</a>. All rights reserved.</span></footer>
			</div>
		</div>
		<div id="rightclickmenu">
			<ul class="menu-context">
				<li class="J_refreshTab">
					<a>刷新</a>
				</li>
			</ul>
		</div>
		
		

	<script src="/user/js/vendor.js"></script>
	<script src="/user/js/bundle.js"></script>
	
	<script src="/user/plug-in/layuiv2.3.0/layui.js"></script>
	<script src="/user/plug-in/jquery-cookie/jquery-cookie.js"></script>
	<script type="text/javascript">
	
	    $(function(){
	    	
	    	layui.use('layer', function(){
		    	$("#logout").click(function(){
		    		var index=layer.load(3, { shade: [0.5] });
		    		$.ajax({
		                type: "GET",
		                url: "/user/logout",
		                data: {token:getCookie('token')},
		                success: function (r) {
		                	if(r){
		                		delCookie("token");
		                		layer.close(index); 
		               		    location.href = '/user/login';
		                	}
		                },
		                error: function(event, XMLHttpRequest, ajaxOptions, thrownError){
		                	layer.msg('退出失败'); 
		                	layer.close(index); 
		                	console.log(event);
		                	console.log(XMLHttpRequest);
		                	console.log(ajaxOptions);
		                	console.log(thrownError);
		                	$("#top").text("登录失败，请重试");
		               	}
		            });
		    	})
		    	
		    	$("#profile").click(function(){
// 		    		console.log(getCookie('token'));
		    		//var index=layer.load(3, { shade: [0.5] });
		    		layer.open({
	                    type: 2,
	                    title: '个人设置',
	                    maxmin: true,
	                    shadeClose: false,
	                    area: ['800px', '400px'],
	                    content: '/user/personal?token='+getCookie('token')
	                });
		    		/* $.ajax({
		                type: "GET",
		                url: "/user/logout",
		                data: {token:getCookie('token')},
		                success: function (r) {
		                	if(r){
		                		delCookie("token");
		                		layer.close(index); 
		               		    location.href = '/user/login';
		                	}
		                },
		                error: function(event, XMLHttpRequest, ajaxOptions, thrownError){
		                	layer.msg('退出失败'); 
		                	layer.close(index); 
		                	console.log(event);
		                	console.log(XMLHttpRequest);
		                	console.log(ajaxOptions);
		                	console.log(thrownError);
		                	$("#top").text("登录失败，请重试");
		               	}
		            }); */
		    	})
	    		
	    	})
	    	
	    })
	
	</script>
</body>
</html>
